<template>
  <view class="common-card f_column_center" style="margin: 0rpx" :class="[item.title=='三定人数'?'sd-bg':'sy-bg']">
    <view class="item-title" :class="[item.title=='三定人数'?'sd-text':'sy-text']"> {{ item.content }} <span style="font-size: 24rpx">人</span></view>
    <view class="f_column_center" :class="[item.title=='三定人数'?'sd-item-bg':'sy-item-bg']" >
      {{ item.title }}
    </view>
  </view>
</template>

<script lang="ts">
import {Vue, Component, Prop} from "vue-property-decorator";

@Component({
  components: {}
})
export default class DataNumCardView extends Vue {
  @Prop() item?: any;
}
</script>

<style scoped>
.item-title {
  font-size: 26rpx;
}

.sd-bg {
  background: linear-gradient(0deg, #C3DFFC, #94C6F8)
  
}
.sd-text{
  color: #2360BB;
  font-size: 36rpx;
}

.sd-item-bg {
  background: linear-gradient(-90deg, #66ADF6, #5884EB);
  border-radius: 50rpx;
  color: #ffffff;
  font-size: 24rpx;
  text-align: center;
  width: 160rpx;
}
.sy-text{
  color: #E96A4E;
  font-size: 36rpx;
}
.sy-item-bg {
  background: linear-gradient(-90deg, #ED6E52, #E47945);
  border-radius: 50rpx;
  color: #ffffff;
  font-size: 24rpx;
  text-align: center;
  width: 160rpx;
}

.sy-bg {
  background: linear-gradient(0deg, #FCE9D8, #FFD3AD);
}

</style>